<template>
  <div class="shop-item" v-bind:class="{filter:status === 0}" v-bind:style="{backgroundImage:'url(' + thumb + ')'}" @click="goShopDetail($event)">
      <div class="shop-content">
          <div>{{name}}</div>
          <label class="shop-address">{{address}}</label>
      </div>
      <div class="state">
          未开业
      </div>
      <!-- <div class="shop-good" @click="good" slot="footer">
          <van-icon :name="icon" />
      </div> -->
  </div>
</template>

<script>
export default {
  name: 'shop-item',
  comments: 'shop-item',
  props: {
    shopId: Number,
    status: Number,
    love: Boolean,
    thumb: String,
    name: String,
    address: String
  }, 
  data () {
    return {
      icon: this.love ? 'like' : 'like-o',
      isLove: this.love,
      defaultBg: '/static/images/健身图片.jpg'
    }
  },
  watch: {
    icon (val) {
      this.icon = val
    }
  },
  methods: {
    // 添加或者取消收藏
    good: function () {
      this.isLove = !this.isLove
      this.icon = this.isLove ? 'like' : 'like-o'
    },
    // 进入健身房详细页面
    goShopDetail (e) {
      if (e.target.tagName !== 'I') {
        this.$router.push({
          name: 'shopDetail',
          params: {
            shop_id: this.shopId
          }
        })
      }
    }
  }
}
</script>
<style lang="postcss" scoped>
.shop-item{
    height: 120px;
    min-height: 120px;
    width: 100%;
    background-repeat: no-repea;
    background-size: 100%;
    color: #333;
    border-radius: 5px;
    position: relative;
    margin-top: 6px;
    overflow: hidden;
}
.state{
  line-height: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  color: white;
  flex-direction: column;
}
.filter{
  filter: opacity(50%);
}
.shop-content{
    position: absolute;
    color: #f8f8f8;
    bottom: 5px;
    left: 5px;
    text-align: left;
}
.shop-address{
    font-size: 0.8rem;
    text-align: left;
}
.shop-good{
    position: absolute;
    right: 5%;
    bottom: 5%;
    color: #f8f8f8;
}
</style>
